import React, { useEffect, useState } from 'react'
import { Swiper, Image } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { SearchBar, Card } from 'antd-mobile'
import styles from './css/home.module.css'
import http from '../../utils/http'


const Home = () => {
    const nav = useNavigate()
    const [list, setList] = useState([])
    const [page, setPage] = useState(1)

    // 列表请求接口
    const getData = async () => {
        const res = await http.get("/api/list", { params: { page } })
        const { code, data } = res.data
        console.log(data);
        if (code === 200) {
            setList([...list, ...data])
            setPage(page + 1)
        }
    }

    useEffect(() => {
        getData()
    }, [])

    const images = [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-3.jpg',
        'https://img.yzcdn.cn/vant/apple-4.jpg',
        'https://img.yzcdn.cn/vant/apple-5.jpg',
        'https://img.yzcdn.cn/vant/apple-6.jpg',
        'https://img.yzcdn.cn/vant/apple-7.jpg',
        'https://img.yzcdn.cn/vant/apple-8.jpg',
    ]
    return (
        <div>
            {/*轮播图*/}
            <Swiper>
                {images.map((image) => (
                    <Swiper.Item key={image} style={{ background: "#000" }}>
                        <Image lazyload src={image} className={styles.img} />
                    </Swiper.Item>
                ))}
            </Swiper>
            <div className={styles.Sear}>
                <SearchBar placeholder='请输入内容'
                    onFocus={() => nav("/search")}
                />
            </div>
              {/* 渲染列表 横向滚动 */}
            <Card title='最新活动' extra={<div onClick={() => nav("/list")}>查看全部</div>}>
                <div className={styles.box}>
                    {
                        list.length > 0 &&
                        list.map((item, ind) => {
                            return <dl key={ind} className={styles.dl}>
                                <dt>
                                    <img src={item.image} alt='' style={{ width: "150px", height: "100px" }} />
                                </dt>
                                <dd>{item.title}</dd>
                                <dd>{item.date}</dd>
                                <dd className={styles.price}>￥{item.price}</dd>
                            </dl>
                        })
                    }
                </div>
            </Card>
        </div>
    )
}

export default Home
